import { wanZhengDiZhi } from '../../gongJu/gongJu.js'

class JiaZaiZhong extends HTMLElement {
	jinDuTiao = null
	
	constructor() {
		super()
		
		let shadow = this.attachShadow({ mode: 'open' })
		
		let style = document.createElement('style')
		style.textContent = `
			embed {
				width: 100%;
				height: 100%;
				position: absolute;
				z-index: 0;
			}
			
			progress {
				width: 100%;
				height: 12px;
				position: absolute;
				bottom: 0;
				z-index: 1;
			}
		`
		shadow.append(style)
		
		let beiJing = document.createElement('embed')
		beiJing.src = wanZhengDiZhi('./svg/jiaZaiBeiJing.svg')
		beiJing.width = '100%'
		beiJing.height = '100%'
		shadow.append(beiJing)
		
		this.jinDuTiao = document.createElement('progress')
		this.jinDuTiao.setAttribute('value', '0')
		this.jinDuTiao.setAttribute('max', '100')
		shadow.append(this.jinDuTiao)
	}
	
	connectedCallback() {
		this.style = `
			${this.style.cssText}
			display: block;
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 99;
		`
	}
	// 监听：进度加，增加进度条的值
	static get observedAttributes() {
	    return ['jin-du-jia'];
	}
	
	attributeChangedCallback(name, oldValue, newValue) {
		if (name === 'jin-du-jia') {
			this.jinDuTiao.value += parseFloat(newValue)
			if (this.jinDuTiao.value >= 100) {
				
			}
		}
	}
	// 显示
	xianShi() {
		this.jinDuTiao.value = 0
		this.style.display = 'block'
	}
	// 隐藏
	yinCang() {
		this.style.display = 'none'
	}
}

customElements.define("jia-zai-zhong", JiaZaiZhong)